<template>

  <div class="box">

    <van-cell-group inset class="van-cell-group">

      <van-image
        round
        width="8rem"
        height="8rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      content="111"/>

      <div class="login" v-if="this.$store.state.username === null">
      <router-link to='/register'>注册</router-link>
        /
      <router-link to="/login">登录</router-link>
      </div>
      <template v-else>
        <p class="login">欢迎你:{{this.$store.state.username}}</p>
      </template>




    </van-cell-group>

    <van-cell-group inset class="van-cell-group">
      <router-link to="address"><van-cell title="地址管理" is-link  /></router-link>
      <van-cell is-link title="账户和安全" @click="show = true" />
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消"
                        close-on-click-action
                        @cancel="onCancel"/>
    </van-cell-group>

    <van-cell-group inset class="van-cell-group">
      <van-cell title="通用" is-link />
      <van-cell title="关于" is-link   />
    </van-cell-group>


  </div>
</template>

<script>
  import { Toast } from 'vant';

  export default {
    data() {
      return {
        show: false,
        actions: [{ name: '退出登录' }],
      };
    },
    methods: {
      onClickLeft() {
        Toast('返回');
      },
      onClickRight() {
        Toast('按钮');
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show = false;
        Toast('退出成功');
        this.$store.commit("logout1");
      },
      onCancel() {
        Toast('取消');
      },
    },
  };
</script>

<style>
  .box{
    height: 500px;
    background-color: #f7f8fa;;
  }
  .van-cell-group{
    margin-top: 30px;
  }
  .login{

    float: right;
    margin-top: 36px;
    margin-right: 80px;
  }
</style>
